<template lang="pug">
.video-frame.page(v-if='data')
  CtrlBar(@closeBar='closeVideo')
  video.pos-a(
    :src='data',
    controls,
    autoplay,
    preload,
    playsinline='true',
    webkit-playsinline='true',
    x5-playsinline='true',
    ref='videoWrap',
    loop,
    :style='styleObj'
  )
</template>

<script>
// 安卓
// x5-video-player-type='h5', // 解除微信浏览器内video自家播放器的绑定
// x5-video-orientation='portraint', // 视频方向，portraint为竖屏，landscape是横屏，x5-video-player-type=”h5″有效
// x5-video-player-fullscreen='true', // 是否支持全屏
// x5-playsinline='true',
// ios
// webkit-playsinline='true', iOS端默认视频只要一运行就会全屏播放，这个属性允许视频播放不弹全屏，维持在页面原位置播放
// playsinline='true',

// x-webkit-airplay='true', // // iOS的airplay功能，一般用于投屏到大屏幕上，这个在H5场景下其实用不着
import CtrlBar from '@/components/CtrlBar'
import { replaySceneOrBgMusic } from '@/utils/audio'

// import { isWxBrowser, isPc } from '@/utils'
export default {
  data() {
    return {
      data: '',
      styleObj: {
        'background': `url(static/images/vd.jpeg) no-repeat;`,
        // 'background': `url(${$globalconfig.URLS.API}/krpano/images/vd.jpg) no-repeat;`,
        'backgroundSize': '100% 100%;'
      }
    }
  },
  mounted() {
    this.$vgo.on('iframe:video', data => {
      if (data.indexOf('http') === 0) {
        this.data = data
      } else {
        this.data = $globalconfig.URLS.API + data
      }
      // this.$_isFull = false
      // setTimeout(() => {
      //   this.$refs.videoWrap.play()
      //   if ((!isPc() && isWxBrowser()) || process.env.NODE_ENV !== 'production') {
      //     this.$refs.videoWrap.addEventListener('webkitfullscreenchange', (event) => {
      //       this.$_isFull = !this.$_isFull
      //       this.togglePanoShow(!this.$_isFull)
      //     })
      //   }
      // }, 500)

      // this.$bar.finish()
    })
  },
  methods: {
    closeVideo() {
      this.data = null
      this.togglePanoShow(true) 
      // 重新播放音频
      replaySceneOrBgMusic()
    },
    togglePanoShow(isShow) {
      let panoDom = document.querySelector('#krpanoSWFObject')
      panoDom.style.display = isShow ? 'block' : 'none'  
    },
  },
  components: {
    CtrlBar
  }
}
</script>

<style lang="stylus" scoped>
$black = #000

.video-frame
  video
    left 50%
    top 50%
    transform translate(-50%, -50%)
    max-width 100%
    max-height 500px
    z-index 2
</style>
